<template>
	<div class="wrapper" :class='[headerScroll]'>
		<div class="search" >
			  <input type="text" placeholder="中文/拼音/首字母" class="search_input" ref='search_input' v-model="keyWord">
			  <span class="iconfont">&#xe6a2;</span>
			  <div class="cancelBtn" ref='cancelBtn' @click='cancelBtnClick'>取消</div>
			  <span class="cancelSpan" ref='cancelSpan' @click='cancelSpanClick'>X</span>
		</div>
		<div class="search_content" ref='search_content' v-show='isCancel'>
		 	  <ul class="content_ul">
		 		  <li class="search_first">{{showContent}}</li>
		 		  <li class="search_item" v-for='item of search_itemList' :key='item.id' @click='search_itemClick'>{{item.name}}</li>
		 	  </ul>
		</div>
	</div>
</template>

<script>
import {disreslove} from '@/utils/utils.js'//汉字编码表
export default {
  name: 'locationHeader',
  props:{
	  cities:Object
  },
  data(){
  	  return{
  		  headerScroll:'',
		  keyWord:'',
		  isCancel:false,
		  showContent:'输入中文/拼音',
		  iLetter:'',
		  iWord:'',
		  search_StartList:[
			  {
				  id:'001',
				  name:'北京'
			  },
			  {
				  id:'002',
				  name:'天津'
			  },
			  {
				  id:'003',
				  name:'上海'
			  },
			  {
				  id:'004',
				  name:'深圳'
			  }
		  ],
		  search_itemList:[]
  	  }
  },
  methods:{
  	  srollChange(){
  		  let scrollHeight=document.documentElement.scrollTop
  		  if(scrollHeight>0){
  			 this.headerScroll='headerScroll'
  		  }
  	  },
	  clearSearch(){//清除输入内容
		  this.keyWord=''
	  },
	  cancelSpanClick(){//x按钮点击
		  this.clearSearch()
		  this.search_itemList=this.search_StartList
		  this.showContent='输入中文/拼音'
	  },
	  showCancel(){//显示搜索内容框
		  this.$refs.cancelSpan.style.display="block"
		  this.$refs.cancelBtn.style.display="block"
	  },
	  hideCancel(){//隐藏搜索内容框
	  		this.$refs.cancelSpan.style.display="none"
	  		this.$refs.cancelBtn.style.display="none"
	  },
	  cancelBtnClick(){//取消按钮点击
		  this.clearSearch()
		  console.log(this.$refs.search_input.value)
		  this.search_itemList=[]
		  this.hideCancel()
		  this.isCancel=false
		  this.$emit('isCancelFun',"true")
	  },
	  search_itemClick(e){//选择你的城市
		  //this.$emit('searchClickInFor',e.target.innerText)
		  this.$store.commit('CityBtn',e.target.innerText)
		  this.$router.push('/')
	  },
	  showEorr(){
		  this.showContent='对不起，找不到：'+this.keyWord
		  this.search_itemList=[]
	  },
	  loopAlphaBet(lowerContent){
		  const citiesContent=this.cities
		  for(let i in citiesContent){
			  if(i.toLowerCase().indexOf(lowerContent.substr(0,1))>-1){
				  let arr=[]
				  citiesContent[i].forEach((value)=>{
					  let a=value.spell.substr(lowerContent.length-1,1)
					  arr.push(a)
					  arr=[...new Set(arr)]//ES6中数组去掉重复内容
					  this.iLetter=arr.toString()
				  })
			  }
		  }
	  },
	  loopWord(content){
		  const citiesContent=this.cities
	  		  for(let i in citiesContent){
	  			  if(i.toLowerCase().indexOf(disreslove(content.substr(0,1)).substr(0,1))>-1){
	  				  let arr=[]
	  				  citiesContent[i].forEach((value)=>{
	  					  let a=value.name.substr(content.length-1,1)
	  					  arr.push(a)
	  					  arr=[...new Set(arr)]//ES6中数组去掉重复内容
	  					  this.iWord=arr.toString()
	  				  })
	  			  }
	  		  }
	  },
	  isLetter(content){//字母检索函数
		  const lowerContent=content.toLowerCase()
		  let myArr=[]
		  for(let i in this.cities){
			 if(i.toLowerCase().indexOf(lowerContent.substr(0,1))>-1){
				 this.cities[i].forEach((value)=>{
					 if(value.spell.indexOf(lowerContent)>-1){
						 this.showContent='输入中文/拼音'
						 myArr.push(value)
						 this.search_itemList=myArr
					 }else if(lowerContent.indexOf(value.spell)>-1){
								this.showContent='对不起，找不到：'+this.keyWord
						 }else{
								this.loopAlphaBet(lowerContent)
								if(!(this.iLetter.indexOf(lowerContent.substr(lowerContent.length-1,1))>-1)){
									this.showContent='对不起，找不到：'+this.keyWord
									this.iLetter=''
								}
						 }
				 })
			 }else if(lowerContent.substr(0,1)==="u"||lowerContent.substr(0,1)==="i"||lowerContent.substr(0,1)==="v"||lowerContent.substr(0,1)==="o"){
				this.showEorr()
			 }
		  }
	  },
	  isWord(content){//汉字检索函数
	  		  let myArr=[]
	  		  for(let i in this.cities){
	  			 if(i.toLowerCase().indexOf(disreslove(content.substr(0,1)).substr(0,1))>-1){
	  				 this.cities[i].forEach((value)=>{
	  					 if(value.name.indexOf(content)>-1){
	  						 this.showContent='输入中文/拼音'
	  						 myArr.push(value)
	  						 this.search_itemList=myArr
	  					 }else if(content.indexOf(value.name)>-1){
	  								this.showContent='对不起，找不到：'+this.keyWord
	  						 }else{
	  								this.loopWord(content)
	  								if(!(this.iWord.indexOf(content.substr(content.length-1,1))>-1)){
	  									this.showContent='对不起，找不到：'+this.keyWord
	  									this.iWord=''
	  								}
	  						 }
	  				 })
	  			 }
	  		  }
	  },
  },
  watch:{
	  keyWord(){
		  let content = this.keyWord.trim()
		  if(content===''){//判断内容是否为空
			  this.search_itemList=this.search_StartList
		  }else{
			 this.showCancel()
			 this.isCancel=true
			 this.$emit('isCancelFun',"false")
			 if(/^[0-9]+$/.test(content)){//判断内容是否为数字
				 this.showEorr()
			 }else if(/^[a-zA-Z]+$/.test(content)){//判断内容是否为字母
				 this.isLetter(content)
			 }else if(/^[\u4e00-\u9fa5]+$/.test(content)){//判断内容是否为汉字
				 this.isWord(content)
			 }else{//判断内容是否为其他情况
				 this.showEorr()
			 }
		  }
	  }
  },
  mounted(){
  	  window.addEventListener('scroll',this.srollChange)
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
	.search
		height:.72rem
		background:#e0e4ec
		padding:.2rem
		position:relative
		.iconfont
			position:absolute
			top:0.4rem
			left:0.4rem
		.search_input
			height:.72rem
			line-height:.72rem
			width:100%
			border-radius:.06rem
			text-align:left
			box-sizing:border-box
			padding-left:.7rem
		.cancelBtn
			position:absolute
			top:0.33rem
			right:0.2rem
			background:#fff
			padding:0.08rem 0.12rem
			border-radius:0.05rem
			display:none
		.cancelSpan
			position:absolute
			right:1.2rem
			top:0.38rem
			display:none
			color:#fff
			background:#ccc
			border-radius:50%
			width:0.35rem
			height:0.35rem
			line-height:0.35rem
			text-align:center
	.search_content
		display:block
		.content_ul
			background:#e9ecf1
			.search_first
				height:0.5rem
				line-height:0.5rem
				color:#999
		.content_ul>li
			height:0.7rem
			width:100%
			background:#fff
			line-height:0.7rem
			border-bottom:1px solid #ccc
			padding-left:.3rem
.headerScroll
	position:sticky
	top:0
	left:0
	max-width:1080px
	z-index:100
</style>
